<template>
  <customContainer ref="customContainerRef" :config="config" />
  <edit-dialog ref="editDialogRef" @success="editSuccess" />
  <price-detail-dialog ref="priceDetailDialogRef" />
</template>
<script lang="ts" setup>
import { computed, ref, reactive, defineAsyncComponent } from 'vue'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'
import { sellingPriceList, sellingPriceRemove } from '@/api/BusinessConfig/sellPriceManagement'

const EditDialog = defineAsyncComponent(() => import('./components/EditDialog.vue'))
const PriceDetailDialog = defineAsyncComponent(() => import('./components/PriceDetailDialog.vue'))

const editDialogRef = ref()
const priceDetailDialogRef = ref()

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  salesProductId: undefined,
})
const customContainerRef = ref()
const multipleSelection = ref([])
const deleteLoading = ref<boolean>(false)

const deleteFn = (ids: string | number):Promise<any> => sellingPriceRemove(ids).then(res => {
  if (res.code === 200) {
    ElMessage.success('删除成功！')
    customContainerRef.value.getList()
  }
})

const editSuccess = () => {
  customContainerRef.value.getList()
}

const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            type: 'select',
            label: '销售产品',
            prop: 'salesProductId',
            option: {
              clearable: true,
              dictInfo: { 
                dict: DictDirection.销售产品,
                dictValue: 'id',
                dictLabel: 'salesProductName', 
              },
            },
          },
          {
            type: 'select',
            label: '状态',
            prop: 'status',
            option: {
              clearable: true,
              dictInfo: { dict: DictDirection.产品状态 },
            },
          },
        ],
        queryParams,
        formOption: {},
      },
      btns: [
        {
          title: '新增',
          type: 'primary',
          onClick: (e) => {
            editDialogRef.value.open('新增')
          },
        },
        {
          title: '删除',
          type: 'primary',
          disabled: !multipleSelection.value.length,
          loading: deleteLoading.value,
          onClick: (e) => {
            ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              const ids = multipleSelection.value.map(i => i.id).join(',')
              deleteLoading.value = true
              deleteFn(ids).finally(() => { deleteLoading.value = false })
            })
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '销售产品',
            align: 'center',
            prop: 'salesProductId',
            autoFormatter: {
              dict: DictDirection.销售产品,
              rowKey: 'salesProductId',
              dictValue: 'id',
              dictLabel: 'salesProductName',
            } },
          { label: '收费币种',
            align: 'center',
            prop: 'chargeCurrency',
            autoFormatter: {
              dict: DictDirection.币种,
              rowKey: 'chargeCurrency',
            } },
          { label: '货物类型',
            align: 'center',
            prop: 'goodsType',
            autoFormatter: {
              dict: DictDirection.货物类型,
              rowKey: 'goodsType',
            } },
          { label: '付款方式',
            align: 'center',
            prop: 'paymentMethod',
            autoFormatter: {
              dict: DictDirection.付款方式,
              rowKey: 'paymentMethod',
            } },
          {
            label: '操作',
            align: 'center',
            width: '250',
            fixed: 'right',
            render(h, { row }) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      editDialogRef.value.open('修改', row)
                    },
                  },
                  {
                    default: () => '修改',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    loading: !!row.loading,
                    type: 'primary',
                    onClick: () => {
                      ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                      }).then(() => {
                        row.loading = true
                        deleteFn(row.id).finally(() => { row.loading = false })
                      })
                    },
                  },
                  {
                    default: () => '删除',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      priceDetailDialogRef.value.open(row.id)
                    },
                  },
                  {
                    default: () => '价格详情',
                  },
                ),
              ]
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            multipleSelection.value = rows
          },
        },
      },
      api: sellingPriceList,
    }
  },
  set(val) {
    return val
  },
})

</script>